<template>
    <div>
<!--        登录页-->
        <div class="loginMain">
            <el-dialog

                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose">
                <el-tabs v-model="activeName" stretch>
                    <el-tab-pane label="普通登录" name="first" class="loginModel">
                        <div class="goLoginText">
                            <div class="goLoginTextInner">
                            <span>
                            <img src="../assets/login/personal.png" alt="">
                        </span>
                                <span>
                            <input type="text" placeholder="请输入账号" v-model="textNumber">
                        </span>
                            </div>
                        </div>
                        <div class="goLoginText">
                            <div class="goLoginTextInner">
                            <span>
                            <img src="../assets/login/clock.png" alt="">
                        </span>
                                <span>
                            <input type="text" placeholder="请输入密码" v-model="textPassword">
                        </span>
                            </div>
                        </div>
                        <button class="loginBtn" @click="textLogin">登录</button>

                    </el-tab-pane>
                    <el-tab-pane label="手机登录" name="second" class="phoneLogin">
                        <div class="goLoginText">
                            <div class="goLoginTextInner">
                            <span>
                            <img src="../assets/login/personal.png" alt="">
                        </span>
                                <span>
                            <input type="text" placeholder="请输入手机号" v-model="phoneNumber">
                        </span>
                            </div>
                        </div>
                        <div class="goLoginText yanzhengma">
                            <div class="goLoginTextInner">
                            <span>
                            <img src="../assets/login/personal.png" alt="">
                        </span>
                                <span>
                            <input type="text" placeholder="请输入验证码" class="yanzhengma2" v-model="getYanzhengma">
                        </span>
                            </div>
                        </div>
                        <button class="getYanzhengma" @click="getYanzhengmaBtn">获取验证码</button>
                        <button class="loginBtn" @click="phoneNumberLogin">登录</button>

                    </el-tab-pane>

                </el-tabs>
                <a @click="goLogon" style="float: left" class="goLogonBtn">去注册</a>
                <a @click="forgotPassword" style="float: right" class="goForgotBtn">忘记密码</a>
            </el-dialog>
        </div>
<!--        注册页-->
        <div class="logonMain">
            <el-dialog
                    :visible.sync="dialogVisible2"
                    width="30%"
                    :before-close="handleClose">
                <el-tabs v-model="activeName2" stretch>
                    <el-tab-pane label="普通注册" name="first" class="loginModel">
                    </el-tab-pane>
                </el-tabs>
                <div class="logonInput">
                    <div>
                    <span>
                    账号
                </span>
                        <span>
                        <input type="text">
                    </span>
                    </div>
                </div>
                <div class="logonInput">
                    <div>
                    <span>
                    密码
                </span>
                        <span>
                        <input type="text">
                    </span>
                    </div>
                </div>
                <div class="logonInput">
                    <div>
                    <span>
                    确认密码
                </span>
                        <span>
                        <input type="text">
                    </span>
                    </div>
                </div>
                <div class="logonInput">
                    <div>
                    <span>
                    昵称
                </span>
                        <span>
                        <input type="text">
                    </span>
                    </div>
                </div>
                <div class="logonInput">
                    <div>
                    <span>
                    手机号
                </span>
                        <el-dropdown>
                            <el-button type="primary">
                                +86<i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>黄金糕</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <span class="logonPhnoeNumber">
                        <input type="text">
                    </span>
                    </div>
                </div>
                <div class="logonInput">
                    <div>
                    <span>
                    验证码
                </span>
                        <span class="logonYanZgengMa">
                        <input type="text">
                    </span>
                        <button class="getYanzhengma2">获取验证码</button>
                    </div>
                </div>
                <a @click="goLogin" class="">去登录</a>
            </el-dialog>
        </div>
<!--        忘记密码页-->
        <el-dialog
                :visible.sync="dialogVisible3"
                width="30%"
                :before-close="handleClose">
<!--            请输入账号-->
            <div class="goLoginText forgotInput">
                <div class="goLoginTextInner goLoginTextInner2">
                    <span>
                            <input type="text" placeholder="请输入账号" v-model="forgotPasswordName">
                        </span>

                </div>
            </div>
<!--            请输入新密码-->
            <div class="goLoginText forgotInput">
                <div class="goLoginTextInner goLoginTextInner2">
                    <span>
                            <input type="password" placeholder="请输入新密码" v-model="newPassword1">
                        </span>
                    <span>
                            <img src="../assets/login/eye-close.png" alt="">
                        </span>
                </div>
            </div>
<!--            请再次输入新密码-->
            <div class="goLoginText forgotInput">
                <div class="goLoginTextInner goLoginTextInner2">
                    <span>
                            <input type="password" placeholder="请再次输入新密码" v-model="newPassword2">
                        </span>
                    <span>
                            <img src="../assets/login/eye-close.png" alt="">
                        </span>
                </div>
            </div>
<!--            请输入手机号-->
            <div class="goLoginText forgotInput">
                <div class="goLoginTextInner goLoginTextInner2">
                    <span>
                            <input type="text" placeholder="请输入手机号" v-model="forgotPasswordPhone">
                        </span>
                </div>
            </div>
<!--            请输入验证码-->
            <div class="logonInput forgotInput2">
                <div>
                    <span class="logonYanZgengMa logonYanZgengMa2">
                        <input type="text" placeholder="请输入验证码" v-model="forgotCode">
                    </span>
                    <button class="getYanzhengma2 fotgotGetYanzhengma2" @click="getForgotPasswordYanzhengma">获取验证码</button>
                </div>
            </div>
            <button class="sureChangeBtn" @click="sureChangePassword">确定更改密码</button>
            <a @click="goLogon" class="goToLogon">立即注册</a>
            <a @click="goLogin" class="goToLogin">去登录</a>
        </el-dialog>
    </div>
</template>

<script>
    import {loginModel1, loginModel4, loginModel5} from "../../api/login";
    import {loginModel2} from "../../api/login";
    import {loginModel3} from "../../api/login";
    // import index from "../store/index"
    export default {
        name: "login",
        data(){
            return{
                dialogVisible: false,
                dialogVisible2: false,
                dialogVisible3: false,
                activeName: 'first',
                activeName2: 'first',
                textNumber:"",
                textPassword:"",
                phoneNumber:"",
                getYanzhengma:"",
                success:"操作成功",
                forgotPasswordName:"",
                forgotPasswordPhone:"",
                newPassword1:"",
                newPassword2:"",
                newPassword3:"",
                forgotCode:"",
            }
        },
        methods:{
            handleClose(done) {
                done()
            },
            goLogon(){
                this.dialogVisible2=true
                this.dialogVisible=false
                this.dialogVisible3=false
            },
            forgotPassword(){
                this.dialogVisible3=true
                this.dialogVisible=false
                this.dialogVisible2=false
            },
            goLogin(){
                this.dialogVisible2=false
                this.dialogVisible3=false
                this.dialogVisible=true
            },
            //    账号密码登录
            textLogin(){
                loginModel3(this.textNumber,this.textPassword).then(res=>{
                    console.log(res)
                    if(res.msg==this.success) {
                        alert("登录成功")
                        this.$store.commit("userInfo",res.userInfo)
                        this.$store.commit("changeLogin",true)
                        // console.log(this.$store.state.flag2)
                        this.dialogVisible = false
                        window.location.href="./index"

                    }
                })
            },
            //获取验证码
            getYanzhengmaBtn(){
                loginModel1(this.phoneNumber).then(res=>{
                    console.log(res)
                })
            },
            //输入验证码之后登录
            phoneNumberLogin(){
                loginModel2(this.phoneNumber,this.getYanzhengma).then(res=>{
                    // console.log(res)
                    if(res.msg==this.success) {
                        alert("登录成功")
                        this.dialogVisible = false
                        this.$store.commit("changeLogin",true)

                    }
                })


            },
        //    忘记密码处获取验证码
            getForgotPasswordYanzhengma(){
                loginModel4(this.forgotPasswordName,this.forgotPasswordPhone).then(res=>{
                    console.log(res)
                })
            },
        //    确定更改密码
            sureChangePassword(){
                if(this.newPassword1==this.newPassword2) {
                    this.newPassword3=this.newPassword1
                }else {
                    alert("两次新密码不一致，请重新输入")
                }
                loginModel5(this.forgotPasswordName,this.newPassword3,this.forgotPasswordPhone,this.forgotCode).then(res=>{
                    console.log(res)
                    if(res.msg==this.success) {
                        alert("登录成功")
                    }
                })
            },

        },
        props:{
            goToLogin:Boolean
        },
        watch:{
            goToLogin(){
                this.dialogVisible=true

            }
        },
        created() {
            this.dialogVisible=Boolean(this.$route.query.dialogVisible)

        }
    }
</script>
<!--登录页-->
<style scoped lang="less">
    .goLoginText {
        margin-bottom: 24px;
        width: 288px;
        height: 30px;
        border: 1px solid #d9d9d9;
        overflow: hidden;
    }
    .goLoginText input {
        border: none!important;
        outline: none;
    }
    /*。goLoginText img {*/
    /*    width: 16px!important;*/
    /*    height: 16px!important;*/
    /*}*/
    .goLoginTextInner {
        margin-top: 7px;
    }
    /deep/ .el-tabs__nav {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .loginBtn {
        margin-left: 2px;
        display: block;
        width: 288px;
        height: 32px;
        color: #fff;
        font-size: 14px;
        letter-spacing: 2px;
        border: none;
        background-color: #00cf8c;
        border-color: #00cf8c;
    }
    .loginBtn:hover {
        background-color: #23db9b;
        border-color: #23db9b;
    }
    /deep/ .el-tabs__content {
        padding: 0;
        padding-left: 85px;
    }
    /deep/ .el-dialog__body {
        padding: 30px 0 50px 0;
        /*padding-bottom: 30px;*/
    }
    .goLogonBtn{
        margin-top: 10px;
        margin-left: 85px;
        cursor: pointer;
    }
    .goForgotBtn {
        margin-top: 10px;
        margin-right: 85px;
        cursor: pointer;
    }
    .yanzhengma {
        width: 158px!important;
        float: left;
    }
    .yanzhengma2 {
        width: 140px!important;
    }
    .getYanzhengma {
        padding: 0 15px;
        margin-left: 15px;
        width: 115px;
        height: 30px;
        border: none;
        background-color: #00cf8c;
        border-color: #00cf8c;
        color: #fff;
        font-size: 14px;
        border-radius: 5px;
    }
    .getYanzhengma:hover{
        background-color: #23db9b;
        border-color: #23db9b;
    }
    .loginMain {
        /deep/ .el-tabs__active-bar {
            left: 47px!important;
        }
    }
    .logonMain{
        /deep/ .el-tabs__active-bar {
            left: 160px!important;
        }
        /*/deep/ .el-dropdown {*/
        /*    width: 70px;*/
        /*}*/
        /deep/ .el-button {
            padding: 0;
            width: 70px;
            height: 30px;
            line-height: 30px;
            border-radius: 0;
            border: 1px solid #d9d9d9;
        }
    }
</style>
<!--注册页-->
<style scoped lang="less">
    .logonInput {
        margin-left: 70px;
        margin-bottom: 14px;
        width: 310px;
        height: 40px;
        /*background-color: rebeccapurple;*/
    }
    .logonInput>div {
        height: 40px;
        overflow: hidden;
    }
    .logonInput span:nth-of-type(1) {
        display: inline-block;
        /*margin-top: -5px;*/
        width: 78px;
        height: 40px;
        line-height: 40px;
        /*background-color: #00cf8c;*/
    }
    .logonInput span:nth-of-type(2) {
        display: inline-block;
        width: 230px;
        height: 40px;
        /*background-color: #f2f2f2;*/
    }
    .logonInput span:nth-of-type(2)>input {
        padding: 4px 11px;
        width: 207px;
        height: 22px;
        border: 1px solid #d9d9d9;
    }
    .logonPhnoeNumber {
        width: 160px!important;
    }
    .logonPhnoeNumber>input {
        padding: 4px 11px;
        width: 136px !important;
        height: 22px;
    }
    .logonYanZgengMa {
        width: 119px !important;
        /*height: 40px;*/
    }
    .logonYanZgengMa>input {
        padding: 4px 11px;
        width: 87px !important;
        height: 22px;
    }
    .getYanzhengma2 {
        padding: 0 4px;
        width: 111px;
        height: 32px;
        border: none;
        background-color: #00cf8c;
        border-color: #00cf8c;
        color: #fff;
        font-size: 14px;
    }
    .getYanzhengma2:hover{
        background-color: #23db9b;
        border-color: #23db9b;
    }
    .logonMain a {
        margin-right: 70px;
        float: right;
    }
</style>
<!--忘记密码页-->
<style scoped>
    .forgotInput {
        margin-left: 80px;
    }
    .forgotInput2 {
        width: 290px;
        margin-left: 80px;
    }
    .fotgotGetYanzhengma2 {
        margin-left: 40px;
    }
    .goToLogon {
        margin-left: 80px;
        float: left;
    }
    .goToLogin {
        float: right;
        margin-right: 80px;
    }
    .goLoginTextInner2 input {
        margin-left: 10px;
        width: 260px;
    }
    .logonYanZgengMa2>imput {
        width: 105px!important;
    }
    .sureChangeBtn {
        margin-left: 80px;
        margin-bottom: 20px;
        padding: 0 15px;
        display: block;
        width: 116px;
        height: 30px;
        border: 0;
        color: #fff;
        background-color: #00cf8c;
        border-color: #00cf8c;
    }
    .sureChangeBtn:hover {
        background-color: #23db9b;
        border-color: #23db9b;
    }
</style>